<template>
  <div class="form">
    <h2>{{ title }}</h2>
    <!-- <input type="text" :value="msg" @input="change">
    <input type="button" value="查看msg" @click="log"> -->
      
    <!-- text框，绑定的是value -->
    输入框：<input type="text" v-model="msg"><br>
    <!-- 单个复选框，绑定的是checked -->
    单个复选框：<input type="checkbox" v-model="flag"><br>

    <!-- 多个复选框，绑定的是多个选中的框value，数组形式 -->
    多个复选框：<input type="checkbox" name="a" v-model="hobby" value="篮球">篮球
    <input type="checkbox" name="a" v-model="hobby" value="乒乓球">乒乓球
    <input type="checkbox" name="a" v-model="hobby" value="足球">足球
    <input type="checkbox" name="a" v-model="hobby" value="排球">排球<br>
    <!-- 颜色输入框，绑定的是value -->
    <input type="color" v-model="color"><br>
    <!-- 单选框，绑定的是选中的框的value -->
    <input type="radio" name="b" value="男" v-model="sex">
    <input type="radio" name="b" value="女" v-model="sex"><br>
    <!-- 下拉菜单，绑定的是选中的项的value -->
    <select v-model="city">
      <option value="0">北京</option>
      <option value="1">上海</option>
      <option value="2">广州</option>
      <option value="3">深圳</option>
    </select><br>
    <!-- 日期选择框，绑定的是选择的日期的value -->
    <input type="date" v-model="date"><br>
    <!-- 文本域，绑定的是value -->
    <textarea v-model="txt"></textarea><br>

    <!-- v-model绑定的都是当前表单控件的 值 -->
    
    <input type="button" value="查看" @click="log">

    <p> {{ str }} </p>
    <input type="text" v-model.lazy="str">
    <br>

    <input type="text" v-model.number="num">
    <p>{{ num }} - {{ typeof num }}</p>

    <input type="text" v-model.trim="name">
    <p>{{ name }} - {{ name.length }}</p>

  </div>
</template>

<script>
export default {
  name:"Form",
  data(){
    return {
      title: "表单的输入绑定",
      msg: 'hello',
      flag: true,
      hobby: ["篮球", "足球"],
      color: "#ff0000",
      sex: "男",
      city: 1,
      date: "2008-08-08",
      txt: "大段文字",
      str: "hello world",
      num: 0,
      name: ""
    }
  },
  methods:{
    log(){
      console.log(this.msg, this.flag, this.hobby, this.color, this.sex, this.city, this.date, this.txt)
    },
    // change(e){
    //   this.msg = e.target.value
    // }
  }
}
</script>
